<template>
  <div v-if="showPopup" class="popup-box">
    <div class="popup-content">
      <div class="title">
        <template v-if="!commonStore.lockPassword">锁定屏幕</template>
        <template v-else
          ><text class="iconfont icon-dengdai"></text>锁定中
        </template>
      </div>
      <div class="tip m-t-14">
        <template v-if="!commonStore.lockPassword">
          设置密码后将进入锁屏状态
        </template>
        <template v-else>
          当前屏幕被收银员<text style="color: #f56c6c"
            >({{ commonStore.userInfo.nickname }})</text
          >锁定
        </template>
      </div>
      <div>
        <up-input
          class="input_h m-t-22"
          v-model="password"
          @confirm="submit"
          :placeholder="
            !commonStore.lockPassword ? '请输入本次锁屏密码' : '请输入解锁密码'
          "
          :type="yulan ? 'text' : 'password'"
        >
          <template #prefix>
            <div class="iconfont icon-mima"></div>
          </template>
          <template v-if="!commonStore.lockPassword" #suffix>
            <div
              @click="yulan = !yulan"
              v-if="yulan"
              class="iconfont icon-yulan-kaiqi"
            ></div>
            <div
              @click="yulan = !yulan"
              v-else
              class="iconfont icon-yulan-guanbi"
            ></div>
          </template>
        </up-input>
      </div>
      <div class="flex justify-end items-center m-t-40">
        <template v-if="!commonStore.lockPassword">
          <div @click="switchShow()" class="bt">取消</div>
          <div class="bt config-bt" @click="submit">确定锁屏</div>
        </template>
        <template v-else>
          <div @click="onLogout" class="bt">重新登录</div>
          <div class="bt config-bt" @click="submit">解除锁定</div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import utils from "@/utils/index";
import { ref, onMounted } from "vue";
import { useCommonStore } from "../../store/common";
const commonStore = useCommonStore();
const password = ref("");
const yulan = ref(false);
const showPopup = ref(false);

onMounted(() => {
  console.log(commonStore);
  if (commonStore.lockPassword) {
    showPopup.value = true;
  }
});
function switchShow(e) {
  if (e != undefined) {
    showPopup.value = e;
  } else {
    showPopup.value = !showPopup.value;
  }
}

function submit() {
  if (!commonStore.lockPassword) {
    if (password.value == "") {
      uni.$u.toast("请输入锁屏密码");
      return;
    }

    commonStore.setLockPassword(password.value);
  }
  // 解锁提交
  else {
    if (password.value == "") {
      uni.$u.toast("请输入解锁密码");
      return;
    }
    if (password.value != commonStore.lockPassword) {
      uni.$u.toast("解锁密码错误");
      return;
    }
    commonStore.setLockPassword("");
    switchShow();
  }
  password.value = "";
}

async function onLogout() {
  await commonStore.logout();
  utils.toUrl("/pages/index/index",'reLaunch');
}

defineExpose({
  switchShow,
});
</script>
<style lang="scss" scoped>
.popup-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.1);
  backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 468rpx;
    min-height: 300rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 30rpx 40rpx;
    .title {
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 700;
      line-height: 36px;
      color: rgba(48, 49, 51, 1);
      text-align: center;
    }
    .tip {
      font-size: 18px;
      line-height: 28px;
      color: rgba(96, 98, 102, 1);
      text-align: center;
    }

    .input_h {
      height: 53.33rpx;
    }

    .iconfont {
      color: $uni-text-color-disable;
      margin-right: 4px;
      width: 20px;
      height: 20px;
      line-height: 1;
      font-size: 20px;
    }

    .icon-dengdai {
      color: #fe9025;
      font-size: 26rpx;
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      text-align: center;
    }

    .bt {
      margin-left: 20rpx;
      width: 120rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 8rpx;
      border: 1rpx solid #dcdfe6;
      text-align: center;
      font-size: 18rpx;
    }
    .config-bt {
      background: $uni-color-primary;
      color: $uni-text-color-inverse;
    }
  }
}
</style>
